<!-- 教学计划执行 -->
<template>
  <div class="pxbCourse">
    <div class="search">
      <el-form
        ref="form"
        :model="queryParams.params"
        label-width="0"
        style="display: flex; align-items: center"
      >
        <el-form-item style="margin-bottom: 0">
          <el-input
            v-model="queryParams.params.courseName"
            placeholder="课程名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button
          type="primary"
          icon="iconfont icon-jiaoxuejihua"
          @click="QRCodeVisible"
        >
          移动端列表</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="inquire"
          >查询</el-button
        >
        <!-- <el-button
          type="primary"
          icon="el-icon-plus"
          @click="InformationFilling('add')"
          >新增教学计划</el-button
        > -->
        <!-- <el-button
          type="danger"
          icon="el-icon-back"
          @click="goBack"
          style="margin-left: 10px"
          >返回</el-button
        > -->
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        height="calc(100vh - 300px)"
        :disabled="disabled"
        border
        :header-cell-style="{
          background: '#f2f3f4',
          color: '#555',
          'font-weight': 'bold',
          'line-height': '32px',
        }"
        style="width: 100%"
      >
        <el-table-column prop="courseName" label="课程名称"> </el-table-column>
        <el-table-column prop="hours" label="学时数" width="70">
        </el-table-column>
        <el-table-column prop="textbook" label="教材或教案" width="120">
        </el-table-column>
        <el-table-column prop="teacherName" label="培训讲课教师姓名" width="80">
        </el-table-column>
        <el-table-column
          prop="teacherWorkplace"
          label="培训讲课教师工作单位"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="teacherGraduatingSchool"
          label="培训讲课教师毕业院校"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="teacherMajor"
          label="培训讲课教师所学专业"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="teacherTeachingMajor"
          label="培训讲课教师所教专业"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="teacherTitle"
          label="培训讲课教师职称"
          width="80"
        >
        </el-table-column>
        <el-table-column prop="teacherSignature" label="培训讲课教师签字">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.teacherSignature"
              style="width: 100px; height: 50px"
              :src="scope.row.teacherSignature"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-view"
              v-if="scope.row.id"
              @click="InformationFilling('look', scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="InformationFilling('update', scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="InformationDel(scope.row)"
              title="确定删除吗？"
            >
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                slot="reference"
                style="margin-left: 10px"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="45%"
      :close-on-click-modal="false"
      top="10px"
      :before-close="handleClose"
    >
      <div class="formModel">
        <el-form
          :model="queryMap"
          ref="queryParams"
          :disabled="disabled"
          label-width="100px"
          style="padding: 5px"
          :rules="rules"
        >
          <el-card style="margin-bottom: 20px; border-radius: 10px">
            <h3 style="text-align: center; margin-bottom: 20px">课程信息</h3>
            <el-form-item label="课程名称" prop="courseName">
              <el-select
                v-model="queryMap.courseName"
                style="width: 100%"
                :disabled="true"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学时数" prop="hours">
              <el-input
                v-model="queryMap.hours"
                type="number"
                min="0"
              ></el-input>
            </el-form-item>
            <el-form-item label="教材或教案" prop="textbook">
              <el-input v-model="queryMap.textbook"></el-input>
            </el-form-item>
          </el-card>
          <el-card style="border-radius: 10px">
            <h3 style="text-align: center; margin-bottom: 20px">
              培训讲课教师信息
            </h3>
            <el-form-item label="姓名" prop="teacherName">
              <el-input v-model="queryMap.teacherName"></el-input>
            </el-form-item>
            <el-form-item label="工作单位" prop="teacherWorkplace">
              <el-input v-model="queryMap.teacherWorkplace"></el-input>
            </el-form-item>
            <el-form-item label="毕业院校" prop="teacherGraduatingSchool">
              <el-input v-model="queryMap.teacherGraduatingSchool"></el-input>
            </el-form-item>
            <el-form-item label="所学专业" prop="teacherMajor">
              <el-input v-model="queryMap.teacherMajor"></el-input>
            </el-form-item>
            <el-form-item label="所教专业" prop="teacherTeachingMajor">
              <el-input v-model="queryMap.teacherTeachingMajor"></el-input>
            </el-form-item>
            <el-form-item label="职称" prop="teacherTitle">
              <el-input v-model="queryMap.teacherTitle"></el-input>
            </el-form-item>
            <el-form-item label="签字" prop="teacherSignature">
              <signature v-model="queryMap.teacherSignature"></signature>
            </el-form-item>
          </el-card>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="移动端新增" :visible.sync="dialogVisible2" width="30%">
      <div>
        <img :src="qrCode" alt="QR Code"  style="width: 100%"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  teachingPlanExecutionPaging,
  teachingPlanExecutionGet,
  teachingPlanExecutionDelete,
  teachingPlanExecutionSave,
  teachingPlanExecutionUpdate,
} from "@/api/OneStageOneGear/OneStageOneGear.js";
import { fetchOptions } from "@/api/signIn/index.js";
import signature from "@/components/signature/index.vue";
import QRCode from "qrcode";
export default {
  data() {
    return {
      dialogVisible2: false,
      qrCode: "",
      tableData: [],
      title: "",
      options: [],
      queryMap: {
        courseName: "",
        hours: 0,
        id: "",
        teacherGraduatingSchool: "",
        teacherMajor: "",
        teacherName: "",
        teacherSignature: "",
        teacherTeachingMajor: "",
        teacherTitle: "",
        teacherWorkplace: "",
        textbook: "",
        trainingClassInfoId: this.$route.query.id,
      },
      total: 0,
      queryParams: {
        current: 1,
        orderBy: "",
        params: {
          courseName: "",
          hours: "",
          id: "",
          teacherGraduatingSchool: "",
          teacherMajor: "",
          teacherName: "",
          teacherSignature: "",
          teacherTeachingMajor: "",
          teacherTitle: "",
          teacherWorkplace: "",
          textbook: "",
          trainingClassInfoId: this.$route.query.id,
        },
        size: 10,
      },
      dialogVisible: false,
      disabled: false,
      rules: {
        courseName: [
          { required: true, message: "请输入课程名称", trigger: "blur" },
        ],
        hours: [{ required: true, message: "请输入课时", trigger: "blur" }],
        teacherGraduatingSchool: [
          { required: true, message: "请输入毕业院校", trigger: "blur" },
        ],
        teacherMajor: [
          { required: true, message: "请输入所学专业", trigger: "blur" },
        ],
        teacherName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        teacherTeachingMajor: [
          { required: true, message: "请输入所教专业", trigger: "blur" },
        ],
        teacherTitle: [
          { required: true, message: "请输入职称", trigger: "blur" },
        ],
        teacherWorkplace: [
          { required: true, message: "请输入工作单位", trigger: "blur" },
        ],
        textbook: [
          { required: true, message: "请输入教材或教案", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    signature,
  },
  created() {
    this.getList();
  },
  methods: {
    async QRCodeVisible() {
      this.dialogVisible2 = true;
      let url ='http://'+
        window.location.host + "/#/TeacherList?id=" + this.$route.query.id;
      console.log(url);

      try {
        this.qrCode = await QRCode.toDataURL(url);
      } catch (err) {
        console.error("生成二维码时发生错误:", err);
      }
      console.log(this.qrCode);
    },
    async getOptions() {
      let res = await fetchOptions({
        id: this.$route.query.id,
      });
      console.log(res, "培训课程");
      if (res.code == 200) {
        this.options = res.data;
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    inquire() {
      this.queryParams.current = 1;
      this.getList();
    },
    reset() {
      this.$refs.queryMap.resetFields();
    },
    //查看、修改、新增
    InformationFilling(type, row) {
      if (type == "look") {
        this.title = "查看教学计划";
        this.disabled = true;
        this.InformationDetails(row);
      } else if (type == "update") {
        this.title = "修改教学计划";
        this.disabled = false;

        this.InformationDetails(row);
      } else if (type == "add") {
        this.getOptions();
        this.title = "新增教学计划";
        this.disabled = false;
        this.queryMap = {
          courseName: "",
          hours: 0,
          id: "",
          teacherGraduatingSchool: "",
          teacherMajor: "",
          teacherName: "",
          teacherSignature: "",
          teacherTeachingMajor: "",
          teacherTitle: "",
          teacherWorkplace: "",
          textbook: "",
          trainingClassInfoId: this.$route.query.id,
        };
      }
      this.dialogVisible = true;
    },
    //新增/修改
    async addCourse() {
      this.$refs.queryParams.validate(async (valid) => {
        if (valid) {
          if (this.title == "修改教学计划") {
            let res;
            if (this.queryMap.id) {
              res = await teachingPlanExecutionUpdate(this.queryMap);
            } else {
              res = await teachingPlanExecutionSave(this.queryMap);
            }
            if (res.code == 200) {
              this.$message({ message: "修改成功", type: "success" });
              this.dialogVisible = false;
              this.getList();
            }
          } else if (this.title == "新增教学计划") {
            let res = await teachingPlanExecutionSave(this.queryMap);
            if (res.code == 200) {
              this.$message({ message: "添加成功", type: "success" });
              this.dialogVisible = false;
              this.getList();
            }
          } else {
            this.dialogVisible = false;
          }
        } else {
        }
      });
    },
    async InformationDetails(row) {
      console.log(row);
      this.getOptions();
      if (row.id) {
        let res = await teachingPlanExecutionGet(row.id);
        if (res.code == 200) {
          this.queryMap = res.data;
        }
      } else {
        (this.queryMap.courseName = row.courseName),
          (this.queryMap.trainingClassInfoId = this.$route.query.id),
          (this.queryMap.trainingClassScheduleId = row.trainingClassScheduleId);
      }
    },
    async getList() {
      let res = await teachingPlanExecutionPaging(this.queryParams);
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    async InformationDel(row) {
      let res = await teachingPlanExecutionDelete(row.id);
      if (res.code == 200) {
        this.$message({ message: "删除成功", type: "success" });
        this.getList();
      } else {
        this.$message({ message: "删除失败", type: "error" });
      }
    },
    handleClose(done) {
      done();
    },
  },
};
</script>
<style lang="less" scoped>
.pxbCourse {
  height: calc(100vh - 100px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .search {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .button {
      display: flex;
      justify-content: flex-end;
      margin: 10px;
    }
  }
  .table {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: calc(100% - 50px);
    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
  .formModel {
    height: 500px;
    overflow: auto;
  }
  /* 自定义整个滚动条 */
  ::-webkit-scrollbar {
    width: 8px; /* 设置滚动条的宽度 */
  }

  /* 自定义滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置轨道的背景颜色 */
    border-radius: 5px;
  }

  /* 自定义滚动条的滑块（thumb） */
  ::-webkit-scrollbar-thumb {
    background: #888; /* 设置滑块的背景颜色 */
    border-radius: 5px;
  }

  /* 当滑块悬停或活动时自定义滚动条的滑块 */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; /* 设置滑块在悬停状态下的背景颜色 */
  }
}
</style>
